<template>
       <!--面包屑-->
<div style="margin-bottom: 30px">
 <el-breadcrumb separator="/">
   <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item>
         <router-link to="/ListMaintenanceRecord">保养记录</router-link>
   </el-breadcrumb-item>
   <el-breadcrumb-item>修改保养记录</el-breadcrumb-item>
 </el-breadcrumb></div>
<el-form ref="ruleFormRef" style="max-width: 500px" :model="form" :rules="rules" label-width="auto" 
        class="demo-ruleForm" :size="formSize" status-icon>

      <el-form-item label="保养标题：" prop="maintenanceTitle">
        <el-input v-model="form.maintenanceTitle" placeholder="请输入保养标题" />
      </el-form-item>

      <el-form-item label="车牌号：" prop="licensePlateNumber">
       <el-select v-model="form.licensePlateNumber" placeholder="请选择车牌号">
        <el-option v-for="item in PlateNumber" :label="item.plateNumber" :value="item.plateNumber" />

      </el-select>
      </el-form-item>


      <el-form-item label="保养金额：" prop="maintenancePrice">
        <el-input v-model="form.maintenancePrice" placeholder="请输入保养金额" />
      </el-form-item>
      <el-form-item label="保养负责人:" prop="maintenanceHead">
        <el-input v-model="form.maintenanceHead" placeholder="请输入保养负责人" />
      </el-form-item>
   <el-form-item label="当前里程数:" prop="currentMileage">
        <el-input v-model="form.currentMileage" placeholder="请输入当前里程数" />
      </el-form-item>
        <el-form-item label="上次保养日期:" prop="lastMaintenanceDate">
              <el-date-picker
             v-model="form.lastMaintenanceDate"
            type="date"
           value-format="YYYY-MM-DD"
           placeholder="请输入上次保养日期"
            style="width: 100%"
          />
 
      </el-form-item>
          <el-form-item label="上次保养里程数:" prop="lastMileage">
        <el-input v-model="form.lastMileage" placeholder="请输入上次保养里程数" />
      </el-form-item>
            <el-form-item label="当前保养日期:" prop="currentMileageDate">
                 <el-date-picker
             v-model="form.currentMileageDate"
            type="date"
           value-format="YYYY-MM-DD"
           placeholder="请输入当前保养日期"
            style="width: 100%"
          />
   
      </el-form-item>
            <el-form-item label="保养项目:" prop="maintenanceProject">
        <el-input v-model="form.maintenanceProject" type="textarea" />
      </el-form-item>
      <el-form-item label="备注:" prop="maintenanceRemark">
        <el-input v-model="form.maintenanceRemark" type="textarea" />
      </el-form-item>


  <el-row type="flex" justify="end">
  
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
        <el-button @click="resetForm">取消</el-button>
      </el-form-item>

  </el-row>
</el-form>
      
</template>
<script lang="ts" setup>
//组件
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
//变量
const form= reactive({
   "maintenanceId": route.query.id,
  "companyID": "",
  "user_Id": "",
  "maintenanceTitle": "",
  "licensePlateNumber": "",
  "maintenancePrice": "",
  "maintenanceHead": "",
  "currentMileage": "",
  "lastMaintenanceDate": "",
  "lastMileage": "",
  "currentMileageDate": "",
  "maintenanceProject": "",
  "maintenanceRemark": "",
   "createdBy": "",
  "createdDate": "",
  "deletedBy": "",
  "deletedDate": "",
  
})
//方法
//反填保养记录
const getMaintenanceRecord = async () => {
    axios.get("/carwrite/api/MaintenanceRecord/MaintenanceRecordGetBy?MaintenanceId=" + form.maintenanceId).then((res) =>
    { 
        form.maintenanceId = res.data.data.maintenanceId
form.companyID=res.data.data.companyID
form.user_Id=res.data.data.user_Id
form.maintenanceTitle=res.data.data.maintenanceTitle
form.licensePlateNumber=res.data.data.licensePlateNumber
form.maintenancePrice=res.data.data.maintenancePrice
form.maintenanceHead=res.data.data.maintenanceHead
        form.currentMileage = res.data.data.currentMileage
        form.lastMaintenanceDate = res.data.data.lastMaintenanceDate
        form.lastMileage = res.data.data.lastMileage
        form.currentMileageDate = res.data.data.currentMileageDate
        form.maintenanceProject = res.data.data.maintenanceProject
      form.maintenanceRemark = res.data.data.maintenanceRemark
      form.createdBy = res.data.data.createdBy
      form.createdDate = res.data.data.createdDate
      form.deletedBy = res.data.data.deletedBy
      form.deletedDate = res.data.data.deletedDate
       
    }) 
}

//显示车牌号
const PlateNumber:any=ref([])
const showLicensePlateNumber = async () => {
    axios.get("/carwrite/api/Vehicles/GetVehicleShowPlateNumber").then((res) => {
        PlateNumber.value = res.data.data
    })
}

//修改保养记录
import  { ElMessage } from 'element-plus'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
//验证
const rules = reactive<FormRules>({
    maintenanceTitle: [
        { required: true, message: '保养标题不能为空', trigger: 'blur' },
        
    ],
    licensePlateNumber: [
        { required: true, message: '车牌号不能为空', trigger: 'blur' },
        
    ],
    maintenancePrice: [
        { required: true, message: '保养金额不能为空', trigger: 'blur' },
        
    ],

    maintenanceHead: [
        { required: true, message: '保养负责人不能为空', trigger: 'blur' },
        
    ],
    currentMileage: [
        { required: true, message: '当前里程数不能为空', trigger: 'blur' },
        
    ],
    lastMaintenanceDate: [
        { required: true, message: '上次保养日期不能为空', trigger: 'blur' },
        
    ],
    lastMileage: [
        { required: true, message: '上次保养里程数不能为空', trigger: 'blur' },
        
  ],
        currentMileageDate: [
        { required: true, message: '当前保养日期不能为空', trigger: 'blur' },
        
  ],
        maintenanceProject: [
        { required: true, message: '保养项目不能为空', trigger: 'blur' },
        
  ],
       
        
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
           
            axios.post("/carwrite/api/MaintenanceRecord/UpdateMaintenanceRecord", form).then(ter => {
                if (ter.data.code > 0) {
                    ElMessage.success("修改成功")
                  router.push("/ListMaintenanceRecord")
                } else {
                    ElMessage.error("修改失败")
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = () => {
   router.push("/ListMaintenanceRecord")
}
//钩子函数
onMounted(async () => {
    showLicensePlateNumber()//获取车牌号
        getMaintenanceRecord()//获取保养记录
})
</script>

 



